<template>
    <div class="business-page">
        <div class="top">
            <Form ref="formInline" :model="formItem" inline>
                <FormItem class="form-item">
                    <Cascader :data="cascaderData" v-model="cascaderModel"></Cascader>
                </FormItem>
                <FormItem class="form-item">
                    <Button type="primary" @click="searchGoodsAction">搜索</Button>
                </FormItem>
                <FormItem class="button">
                    <Button type="primary" @click="handleSubmit('formInline')">生成交易数据</Button>
                </FormItem>
            </Form>
        </div>
        <div class="goods-list">
            <Row>
                <RadioGroup v-model="statisticsImg">
                    <Col span="6" v-for="(item,index) in goodsList" :key="index">
                        <Radio :label="index"><span></span></Radio>
                        <div>
                            <img class="img" :src="item.img">
                        </div>
                    </Col>
                </RadioGroup>
            </Row>
        </div>
    </div>
</template>

<script>
import { getCategoryList, searchGoods, getCategoryTree } from '@/api/school'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      formItem: {
        select1: '',
        select2: '',
        select3: ''
      },
      cascaderData: [],
      cascaderModel: '',
      CatList1: [],
      CatList2: [],
      CatList3: [],
      goodsList: [],
      statisticsImg: 0
    }
  },
  methods: {
    ...mapActions([
      'setHelpId'
    ]),
    getCategoryData () {
      getCategoryTree().then(ret => {
        let listData = ret.data.data
        let selectOption = []
        listData.forEach(item => {
          let dataOption = { label: item.title, value: item.id, children: [] }
          if (item.childs && item.childs.length > 0) {
            item.childs.forEach(item1 => {
              let dataOption1 = { label: item1.title, value: item1.id, children: [] }
              if (item1.childs && item1.childs.length > 0) {
                item1.childs.forEach(item2 => {
                  dataOption1.children.push({ label: item2.title, value: item2.id })
                })
              }
              dataOption.children.push(dataOption1)
            })
          }
          selectOption.push(dataOption)
        })
        this.cascaderData = selectOption
      })
    },
    getCatList () {
      getCategoryList().then(ret => {
        if (ret.data.errcode === 1001) {
          let list = ret.data.data
          list.forEach(item => {
            if (item.type === 1) {
              this.CatList1.push(item)
            }
            if (item.type === 2) {
              this.CatList2.push(item)
            }
            if (item.type === 3) {
              this.CatList3.push(item)
            }
          })
        }
      })
    },
    handleSubmit () {
      if (this.statisticsImg === '') {
        this.$Message.error('请选择商品')
        return false
      }
      this.$router.push({
        name: 'schoolStatistics',
        params: {
          img: this.goodsList[this.statisticsImg].statistics
        }
      })
    },
    searchGoodsAction () {
      if (this.cascaderModel === '') {
        this.$Message.error('请选择类别')
        return false
      }
      // let data = { type1_id: this.cascaderModel[0], type2_id: this.cascaderModel[1], type3_id: this.cascaderModel[2] }
      let data = { type3_id: this.cascaderModel[2] }
      searchGoods(data).then(ret => {
        if (ret.data.errcode === 1001) {
          this.goodsList = ret.data.data
          this.statisticsImg = 0
        } else {
          this.$Message.error('没有查询到数据')
        }
      })
    }
  },
  mounted () {
    this.setHelpId(2)
    this.getCategoryData()
  }
}
</script>

<style scoped lang="less">
    .business-page {
        display: flex;
        flex-direction: column;

        .form-item {
            width: 200px;
        }

        .top {
            width: 80%;
        }

        .button {
            margin-left: 410px;
        }
    }

    .goods-list {
        width: 80%;

        &-radio {
            display: flex;
            justify-content: center;
        }
    }

    .img {
        width: 100%;
    }
</style>
